<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>kxbdMarquee 模拟Marquee无缝滚动 &raquo; 在线演示 - 前端开发仓库</title>
</head>
<style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
    }
    body
    {
        font-size: 12px;
    }
    a
    {
        color: #333;
    }
    ul
    {
        list-style: none;
    }
    #marquee1
    {
        position: absolute;
        top: 80px;
        left: 50px;
        width: 310px;
        height: 45px;
        overflow: hidden;
        background: #333;
        border: 2px solid #333;
    }
    #marquee1 ul li
    {
        float: left;
        padding: 0 1px;
    }
    #marquee1 ul li img
    {
        display: block;
    }
    
    #marquee2
    {
        position: absolute;
        top: 80px;
        left: 400px;
        width: 300px;
        height: 25px;
        overflow: hidden;
        background: #EFEFEF;
    }
    #marquee2 ul li
    {
        float: left;
        padding: 0 10px;
        line-height: 25px;
    }
    
    #marquee3
    {
        position: absolute;
        top: 150px;
        left: 50px;
        width: 60px;
        height: 235px;
        overflow: hidden;
        background: #333;
        border: 2px solid #333;
    }
    #marquee3 ul li
    {
        float: left;
        padding: 1px 0;
    }
    #marquee3 ul li img
    {
        display: block;
    }
    
    #marquee4,#marquee5
    {
        position: absolute;
        top: 150px;
        left: 400px;
        width: 200px;
        height: 200px;
        overflow: hidden;
        background: #EFEFEF;
    }
    #marquee4 ul li,#marquee5 ul li
    {
        float: left;
        width: 180px;
        padding: 10px;
        line-height: 20px;
    }
    
    #marquee5
    {
        left:800px;
        width:280px;
        height: 500px;
    }
</style>
</head>
<body>
    <div id="marquee1">
        <ul>
            <li>
                <img src="img/01s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/02s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/03s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/04s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/05s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/06s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/07s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/08s.jpg" width="60" height="45"></li>
        </ul>
    </div>
    <div id="marquee2">
        <ul>
            <li><a href="#">新闻公告一</a></li>
            <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
            <li><a href="#">新闻公告三新闻公告三</a></li>
            <li><a href="#">新闻公告四新闻公告四新闻公告四</a></li>
            <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
            <li><a href="#">新闻公告六新闻公告六新闻公告六</a></li>
        </ul>
    </div>
    <div id="marquee3">
        <ul>
            <li>
                <img src="img/01s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/02s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/03s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/04s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/05s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/06s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/07s.jpg" width="60" height="45"></li>
            <li>
                <img src="img/08s.jpg" width="60" height="45"></li>
        </ul>
    </div>
    <div id="marquee4">
        <ul>
            <li><a href="#">新闻公告一新闻公告一</a></li>
            <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二新闻公告二</a></li>
            <li><a href="#">新闻公告三新闻公告三新闻公告三新闻公告三</a></li>
            <li><a href="#">新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四新闻公告四</a></li>
            <li><a href="#">新闻公告五新闻公告五新闻公告五新闻公告五新闻公告五</a></li>
            <li><a href="#">新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六新闻公告六</a></li>
        </ul>
    </div>
    <div id="marquee5">
        <ul>
        </ul>
    </div>
    <div>
        <button id="ok" style="width:150px; height:30px;">添加值</button>
    </div>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.kxbdMarquee.js"></script>
    <script src="/Plugin/stwhCommon.js" type="text/javascript"></script>
    <script type="text/javascript">
        var hmlist = [], sumcount = 10;
        for (var i = 0; i < sumcount; i++) {
            var hd="10";
            if ((i+"").length>1) hd += (i+"");
            else  hd += "0"+i;
            hmlist[i] = "151****"+hd;
        }

        function addLi() {
            $("#marquee5").children().children().remove();
            for (var i = 0; i < hmlist.length; i++) {
                $("#marquee5").children().prepend("<li>" + hmlist[i] + "</li>");
            }
        }
        $(function(){
            addLi();
            $("#marquee1").kxbdMarquee({ direction: "right", loop: 2 });
            $("#marquee2").kxbdMarquee({ isEqual: false });
            $("#marquee3").kxbdMarquee({ direction: "down" });
            $("#marquee4").kxbdMarquee({ direction: "up", isEqual: false });
            $("#marquee5").kxbdMarquee({ direction: "up", isEqual: false });

            $("#ok").click(function () {
                ++sumcount;
                if ((sumcount + "").length > 1) {
                    var hd = "10";
                    if ((sumcount + "").length > 1) hd += (sumcount + "");
                    else hd += "0" + sumcount;
                    hmlist.AddArray("151****" + hd);
                }

                addLi();

                clearInterval($("#marquee5").kxbdMarquee("getintervalId"));
                $("#marquee5").kxbdMarquee("init", { direction: "up", isEqual: false });
            });
        });
    </script>
</body>
</html>
